<template>
	<div>
		<ul class="list-info-view">
			<li>
				<div class="unified-template">
					<div class="template-row-list">
						<label class="label-title">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
						<div class="row-content">
							<input type="text" placeholder="请输入姓名" class="routineInput" v-model="form.name"/>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="unified-template">
					<div class="template-row-list">
						<label class="label-title">称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;谓</label>
						<div class="row-content">
							<div class="checkbox-list">
								<label>
									<input style="top:0px;" type="radio" value="0" name="sex" v-model="form.gender">先生
								</label>
								<label>
									<input style="top:0px;" type="radio" value="1" name="sex" v-model="form.gender">女士
								</label>
							</div>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="mint-cell mint-field" v-if="form.isShow">
					<div class="mint-cell-wrapper">
						<div class="mint-cell-title">
							<span class="mint-cell-text">客户电话：</span>
						</div>
						<div class="mint-cell-value">
							<input type="tel" placeholder="请输入电话" class="mintPhone" v-model="form.mobile"/>
						</div>
					</div>
				</div>
				<div class="mint-cell mint-field"  v-if="!form.isShow">
					<div class="mint-cell-wrapper">
						<div class="mint-cell-title">
							<span class="mint-cell-text">客户电话：</span>
						</div>
						<div class="mint-cell-value">
							<input type="tel" maxlength="7" class="digital-input-box" v-model="form.mobile">
							<div class="digital-input">
								<div class="digital-input-item">{{ userTel[0] }}</div>
								<div class="digital-input-item">{{ userTel[1]  }}</div>
								<div class="digital-input-item">{{ userTel[2]  }}</div>
								<div class="digital-input-item"><i class="fa fa-asterisk"></i></div>
								<div class="digital-input-item"><i class="fa fa-asterisk"></i></div>
								<div class="digital-input-item"><i class="fa fa-asterisk"></i></div>
								<div class="digital-input-item"><i class="fa fa-asterisk"></i></div>
								<div class="digital-input-item">{{ userTel[7]  }}</div>
								<div class="digital-input-item">{{ userTel[8]  }}</div>
								<div class="digital-input-item">{{ userTel[9]  }}</div>
								<div class="digital-input-item">{{ userTel[10]  }}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="mint-cell mint-field" v-if="customer.reportWay === '0'" >
					<div class="mint-cell-wrapper" style="border-bottom:none;">
						<div class="mint-cell-title">
							<span class="mint-cell-text"></span>
						</div>
						<div class="mint-cell-value">
							<div class="telEye" @click="toggleShow">
								<span class="toggleTel" v-if="form.isShow">
									<i class="fa fa-eye-slash"></i>隐号报备
								</span>
								<span class="toggleTel" v-if="!form.isShow">
									<i class="fa fa-eye"></i>全号报备
								</span>
							</div>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="unified-template">
					<div class="template-row-list">
						<label class="label-title" >意&nbsp;&nbsp;向&nbsp;&nbsp;楼&nbsp;&nbsp;盘</label>
						<div class="row-content">
							<div class="routineInfo"
									 @click="toPremisesListInfo()">
								<span v-if="!premiseList.length">选择楼盘</span>
								<span v-else>
									<span v-for="item in premiseList">
										{{item.premisesName + '、'}}
									</span>
								</span>
							</div>
							<div  class="routineInfo"
									>

							</div>
							<i class="fa fa-angle-right"></i>
						</div>
					</div>
				</div>
			</li>
		</ul>
		<div class="line bor-b"></div>
		<textarea class="routineTextarea" placeholder="请描述客户意向，包括户型，面积等"
							maxlength="200"
							v-model="form.remark"
		></textarea>
	</div>
</template>
<script>
	export default{
		components: {
		},
		props: {
			premiseList: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data(){
			return {
				form:{
					name:'',
					mobile:'',
					gender:'0',
					special:'',
					remark: '',
					isShow: true,
				},
				customer:{
					reportWay:'0',
					premiseList: []
				},
			}
		},
		mounted() {
			this.init()
		},
		watch:{},
		computed: {
			userTel () {
				let mobile = this.form.mobile
				if (mobile.length > 0) {
					return mobile.split('')
				} else {
					return Array(10)
				}
			}
		},
		methods: {
			init() {
			},
			/***
			 * 选择楼盘
			 */
			toPremisesListInfo() {
				this.$parent.currentStep = 2 ;// 显示楼盘选择
			},
			toggleShow() {
				this.form.isShow = !this.form.isShow
				console.log(this.form.isShow )
			}
		}
	}

</script>
<style scoped>
	/*新增报备*/
.redColor {color: #ff5e5e;}
.list-info-view{background-color: #FFF;}
.list-info-view .template-row-list{height: 43px;line-height: 44px;}
.list-info-view>li:after{content: '';height: 1px;background-color: #ccc; -webkit-transform: scaleY(.5);transform: scaleY(.5);display: block;width: 100%;}
.list-info-view .template-row-list{padding-left: 100px;}
.list-info-view .label-title{width: 100px;font-size: 14px;}
.template-row-list .routineInput{line-height: 30px;padding-left: 10px;background-color: #fff;}
.template-row-list .routineSelect,.template-row-list .routineTime{padding-right: 20px;padding-left: 10px; width: 100%;line-height: 30px;background-color: #fff;}
.row-content .fa-angle-right{position: absolute;right: 0;top: 10px;font-size: 20px;display: block;}
.routineInfo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width: 185px;}
.routineTextarea,.followTextarea{width: 100%;height: 110px;border-bottom: 1px solid #ccc;padding: 10px;font-size: 14px;}
.followTextarea{height: 200px;}
.routineSelect .unselecteds{color: #999;}
.checkbox-list label{margin-right: 40px;padding-left: 10px;}
.checkbox-list label input{position: relative;top: 7px;margin-right: 6px;left: 0px}
.checkbox-list label:last-child{margin-right: 0;}


	.mint-field {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	}
	.mint-cell {
	    background-color: #fff;
	    box-sizing: border-box;
	    color: inherit;
	    min-height: 48px;
	    display: block;
	    overflow: hidden;
	    position: relative;
	    text-decoration: none;
	}
	.mint-cell-wrapper {
		border-bottom: 1px solid #f5f5f5;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: center;
	    box-sizing: border-box;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    font-size: 16px;
	    line-height: 1;
	    min-height: inherit;
	    overflow: hidden;
	    padding: 0 10px;
	    width: 100%;
	}
	.mint-field .mint-cell-title {
	    width: 105px;
	    -webkit-box-flex: 0;
	    -ms-flex: none;
	    flex: none;
	}
	.mint-field .mint-cell-value {
	    -webkit-box-flex: 1;
	    -ms-flex: 1;
	    flex: 1;
	    color: inherit;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	}
	.mint-field .mint-cell-title{color: #000;}
	.mint-cell-value .sexBtn{width: 56px;height: 24px;border-radius: 4px;border:1px solid #cdcdcd;text-align: center;line-height: 22px;font-size: 12px;margin: 0 4px;}
	.mint-cell-value .sexBtn.active{border:1px solid #eb6100;color: #eb6100;background-color: #ffece0;}
	.telEye{color: #ec6f26;position: absolute;right: 10px;display: inline-block;top: 16px;}
	.toggleTel .fa{margin-right: 6px;}
	.mint-cell-value .mintPhone{line-height: 30px;background-color: #fff;outline: none;}

	.digital-input-box{position: absolute; opacity: 0.01;display: block; z-index: 50; left: 105px;width: 100%; top: 2px; height: 46px;}
	.digital-input{overflow: hidden;width: 100%;}
	.digital-input .digital-input-item{height: 48px;float: left;width: 9.09%;border-right: 1px dashed #d8d8d8;text-align: center;line-height: 48px;display: flex; justify-content: center;align-items: center;}
	.digital-input .digital-input-item:first-child{border-left:1px solid #d8d8d8;}
	.digital-input-item .fa{font-size: 12px;color: #999;}

	.mint-field.is-textarea .mint-cell-wrapper .mint-cell-text{position: absolute;top: 12px;}
	.report-button{padding: 0 10px;}
	.report-button .mint-button--danger{background-color: #eb6100;margin-top: 20px;}

	.gpsLocation{float: right;position: relative;padding-right: 24px;}
	.gpsLocation>.fa{display: block;top: 12px;color: #eb6100;}
	.titlePhoto{font-weight: normal;padding: 10px;}
	.photo-list li{float: left;width: 64px;height: 64px;position: relative;border:1px solid #cdcdcd;margin: 0 5px 10px;}
	.photo-list li>img{width: 100%;height: 100%;}
	.photo-list>li .fa-times-circle{position: absolute;right: -8px;top: -8px;color: #ff6666;font-size: 18px;}
	.photo-list .departureBtn{border:none;}
	.departureBtn>a{border: 1px dashed #7f7f7f;height: 100%;display: block;text-align: center;}
	.departureBtn>a .fa-plus{font-size: 30px;color: #7f7f7f;margin-top: 16px; }
	.departureBtn .fileBtn{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 999;opacity: 0;}
	.digital-input:after,.photo-list:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}
	.time-show{color:#ec6f26}

	input[type=text],input[type=tel]{ width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

	.reportProtectTipBack {
		background: #000;
		opacity: 0.5;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
	}
	.tipsCountStyle {
		position: absolute;left: 45vw;top: 68vh;color: #FFF;font-size: 16px;font-weight: bold;width: 10vw;text-align: center;
	}
	.reportProtectTip {
		position: absolute;
		z-index: 999;
		top: 22vh;
		left: 16.5vw;
		width: 67vw;
		height: 44vh;
		line-height: 4vh;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 3vw;
		background: #fff;
		font-size: 3.5vw;
	}
	.reportProtectTip .tipBtn {width: 60.5vw;height: 9vw;line-height: 9vw;background: #ff5e5e;color: #fff;text-align: center;border-radius: 3px;position: absolute;bottom: 3vw;}
	.warning-icon{font-size: 20px;color:#ff5e5e;}

	.recommend-modal {
		top: 0;
		height: 100%;
		width: 100%;
		background-color: #fff;
	}
	.recommend-modal.recommend-modal-show {
		position: absolute;
		z-index: 1;
	}
</style>
